<template>
  <PageBox :data="dataInfo" @searchBtn="getTbody" :maring="maring" :isRadio="isRadio" :isCheckbox="isCheckbox"
    @tableCheckboxBtn="tableCheckboxBtn" @tableRadioBtn="tableRadioBtn">
    <template #search="{ search }">
      <ElFormItemBox label="单据状态" prop="inStockBillState">
        <ElSelectBox :data="search" dataName="inStockBillState" :all="{
          label: '全部',
          value: 0,
        }" :options="options.state" />
      </ElFormItemBox>
      <!-- <ElFormItemBox label="开单时间">
        <ElDaysBox :data="search" :dataName="['beginTime', 'endTime']" />
      </ElFormItemBox> -->
    </template>
    <template #headR>
    </template>
    <template #select_associationBillNo="{ row }">
      <PopoverTabel :title="row.associationBillNo" :width="1000" :thead="[
        {
          label: '规格编号',
          prop: 'specificationCode',
          align: 'center',
          width: 120
        },
        {
          label: '物料名称',
          prop: 'goodsName',
          align: 'left',
          width: 220
        },
        {
          label: '规格型号',
          prop: 'specificationName',
          align: 'left',
          width: 100
        },
        {
          label: '供应商',
          prop: 'supplierName',
          align: 'left',
          width: 200
        },
        {
          label: '物料类型',
          prop: 'goodsType',
          align: 'center',
          width: 100
        },
        {
          label: '使用单位',
          prop: 'goodsUnit',
          align: 'center',
          width: 100
        },
        {
          label: '入库数量',
          prop: 'inStockQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '备注',
          prop: 'inStockRemark',
          align: 'left',
          width: null,
        }
      ]" @show='(table: any) => {
        switch (row.billTypeName) {
          case "物料采购":
            proxy.$api.GoodsPurchaseOrder
              .GetMatchPagePurchaseOrders({
                pageIndex: 1,
                pageSize: 1,
                totalCount: 1,
                queryDataBaseFiled: "purchaseOrderNo",
                likeWords: row.associationBillNo,
                onlySelf: 0,
                isShowDisabled: -1,
                purchaseOrderState: -2,
                inStockState: -2
              })
              .then((res: any) => {
                table.tbody = res.list[0]?.purchaseDetailsList?.map((el: any) => ({
                  specificationCode: el.specificationCode,//规格编号
                  goodsName: el.goodsName,//物料名称
                  specificationName: el.specificationName,//规格型号
                  supplierName: el.supplierName,//供应商
                  goodsType: el.categoryName,//物料类型
                  goodsUnit: el.goodsUnitName,//使用单位
                  inStockQuantity: el.planPurchaseQuantity,//入库数量
                  inStockRemark: el.purchaseDesc,//备注
                })) || []
                table.loading = false
              })
              .catch(() => {
                table.tbody = []
                table.loading = false
              });
            break;
          case "生产退料":
            proxy.$api.ProductionBusniess
              .GetMatchPageBackProduceMaterialBills({
                pageIndex: 1,
                pageSize: 1,
                totalCount: 1,
                queryDataBaseFiled: "backMaterialBillNo",
                likeWords: row.associationBillNo,
                onlySelf: 0,
                isShowDisabled: -1,
                backMaterialType: 0,
                backMaterialBillState: -1,
                inStockState: -1
              })
              .then((res: any) => {
                table.tbody = res.list[0]?.backProduceMaterialMxList?.map((el: any) => ({
                  specificationCode: el.specificationCode,//规格编号
                  goodsName: el.goodsName,//物料名称
                  specificationName: el.specificationName,//规格型号
                  supplierName: el.supplierName,//供应商
                  goodsType: el.goodsType,//物料类型
                  goodsUnit: el.goodsUnit,//使用单位
                  inStockQuantity: el.quantity,//入库数量
                  inStockRemark: el.backRemark,//备注
                })) || []
                table.loading = false
              })
              .catch(() => {
                table.tbody = []
                table.loading = false
              });
            break;
          default:
            proxy.$message("该单据未设置", "error");
            break;
        }

      }' />
    </template>
    <template #inStockBillState="{ row }">
      <el-tag type="danger" effect="dark" v-if="row.inStockTypeName === '红冲入库'">被红冲</el-tag>
      <ElTagBox :data="row.inStockBillState" :options="options.state" v-else />
    </template>
    <template #inStockBillNo="{ row }">
      <PopoverTabel :title="row.inStockBillNo" :width="1000" :thead="[
        {
          label: '规格编号',
          prop: 'specificationCode',
          align: 'center',
          width: 120
        },
        {
          label: '物料名称',
          prop: 'goodsName',
          align: 'left',
          width: 220
        },
        {
          label: '规格型号',
          prop: 'specificationName',
          align: 'left',
          width: 100
        },
        {
          label: '供应商',
          prop: 'supplierName',
          align: 'left',
          width: 200
        },
        {
          label: '物料类型',
          prop: 'goodsType',
          align: 'center',
          width: 100
        },
        {
          label: '使用单位',
          prop: 'goodsUnit',
          align: 'center',
          width: 100
        },
        {
          label: '批次编号',
          prop: 'productionBatchNumber',
          align: 'center',
          width: 100
        },
        {
          label: '生产日期',
          prop: 'productionDate',
          align: 'center',
          width: 100
        },
        {
          label: '库区库位',
          prop: 'storageAreaInfo',
          align: 'center',
          width: 140
        },
        {
          label: '入库数量',
          prop: 'inStockQuantity',
          align: 'center',
          width: 100,
        },
        {
          label: '备注',
          prop: 'inStockRemark',
          align: 'left',
          width: null,
        }
      ]" :tbody="row.inStockDetailList" />
    </template>
  </PageBox>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
const { proxy } = getCurrentInstance() as any;
import './pageCss.scss'; // 引入样式
import { useListComponent } from './pageTs'; // 引入逻辑
const props = withDefaults(
  defineProps<{
    isRadio?: boolean; //单选
    isCheckbox?: boolean; //多选
    maring?: number; //多选
  }>(),
  {
  },
);

const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'tableRadioBtn', row: any): void;
  (event: 'tableCheckboxBtn', arr: any): void;
}>();
//多选数据
const tableCheckboxBtn = (arr: any) => {
  emit('tableCheckboxBtn', arr);
};
//单选数据
const tableRadioBtn = (row: any) => {
  emit('tableRadioBtn', row);
};
// 组件挂载后执行
onMounted(() => {
  getTbody();
});
const { dataInfo, getTbody, options } = useListComponent({
  ...props,
});
</script>